<template>
  <el-dialog
    v-model="visible"
    title="分享抖音卡片"
    width="800px"
    :close-on-click-modal="true"
    :show-close="false"
  >
    <!-- 卡片信息 -->
    <div class="section">
      <h3>卡片信息</h3>
      <div class="flex gap-8">
        <span>卡片名称：{{ cardData?.title }}</span>
        <span>状态：
          <el-tag type="success">跳转正常</el-tag>
        </span>
      </div>
    </div>

    <!-- 复制/分享抖音卡片 -->
    <div class="section">
      <h3 class="font-bold">复制/分享抖音卡片</h3>
      <div>
        <el-alert
          title="无风险提示链接"
          type="success"
          show-icon
          :closable="false"
          class="mb-10"
        />
        <div class="link-box">
          <el-tooltip
            :content="cardData?.enCodeUrl"
            placement="top"
            :show-after="500"
          >
            <span class="link-text">{{ truncateUrl(cardData?.enCodeUrl) }}</span>
          </el-tooltip>
          <div class="button-group">
            <el-button type="primary" @click="genImage">生成图文卡片</el-button>
            <el-button type="primary" link @click="copy(cardData?.enCodeUrl)">
              <Icon icon="ep:copy-document" class="mr-5px" /> 复制链接
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 复制链接方式分享卡片操作教程 -->
    <div class="section last-section">
      <h3>复制链接方式分享卡片操作教程</h3>
      <br/>
      <div class="flex gap-4">
        <div class="video-container">
          <video
            :key="videoKey"
            :src="videoUrl"
            controls
            autoplay
            class="video-player"
          >您的浏览器不支持Video标签</video>
        </div>
        <div class="tutorial-list">
          <ol>
            <li>使用<span>苹果手机</span>打开抖音APP（老版本30.3左右）</li>
            <li>将生成的卡片链接，通过抖音内私信发送给任意好友</li>
            <li>自己点击已发送给好友的链接（打开后会自动跳到微信）</li>
            <li>返回到抖音APP，点击页面右上角进行转发操作，再次转发给该好友，即可完成卡片制作</li>
          </ol>
        </div>
      </div>
    </div>
  </el-dialog>
   <GenerateImageCard ref="generateImageCardRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Icon } from '@/components/Icon'
import GenerateImageCard from './GenerateImageCard.vue'

const visible = ref(false)
const cardData = ref<any>(null)
const videoUrl = ref('https://vj.fenukj.cn/test/dycp.mp4')
const generateImageCardRef = ref()
const videoKey = ref(0)

const truncateUrl = (url: string) => {
  if (!url) return ''
  const maxLength = 50
  if (url.length <= maxLength) return url
  return url.substring(0, maxLength) + '...'
}

const open = (row: any) => {
  cardData.value = row
  videoKey.value++
  visible.value = true
}

const copy = (text: string) => {
  if (!text) return
  navigator.clipboard.writeText(text)
  ElMessage.success('已复制到剪贴板')
}

const genImage = () => {
  generateImageCardRef.value.open(cardData.value)
}

defineExpose({ open })
</script>

<style scoped>
.section {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.last-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.link-text {
  flex: 1;
  word-break: break-all;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-container {
  flex: 1;
  max-width: 220px;
}

.video-player {
  width: 100%;
  max-width: 220px;
  border-radius: 4px;
}

.tutorial-list {
  flex: 1;
  min-width: 220px;
}
.tutorial-list span{
  color: red;
}
.tutorial-list ol {
  margin: 0;
  padding-left: 20px;
}

.tutorial-list li {
  margin-bottom: 8px;
  color: #606266;
  max-width: 360px;
}

.font-bold {
  font-weight: bold;
}
</style>
